<!-- 通用表格组件 -->
<template>
  <div class="common-table">
    <el-table
      :data="tableData"
      v-bind="$attrs"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="showSelection"
        type="selection"
        width="55"
      />
      
      <el-table-column
        v-if="showIndex"
        type="index"
        label="序号"
        width="80"
      />
      
      <template v-for="column in tableColumns" :key="column.prop">
        <el-table-column
          v-if="!column.render"
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :min-width="column.minWidth"
          :align="column.align || 'left'"
          :fixed="column.fixed"
          :sortable="column.sortable"
        >
          <template #default="scope" v-if="column.formatter">
            {{ column.formatter(scope.row[column.prop], scope.row, scope.$index) }}
          </template>
        </el-table-column>
        
        <!-- 自定义渲染列 -->
        <el-table-column
          v-else
          :label="column.label"
          :width="column.width"
          :min-width="column.minWidth"
          :align="column.align || 'left'"
          :fixed="column.fixed"
        >
          <template #default="scope">
            <slot 
              :name="column.render" 
              :row="scope.row" 
              :$index="scope.$index"
              :column="column"
            />
          </template>
        </el-table-column>
      </template>
      
      <!-- 操作列 -->
      <el-table-column
        v-if="showActions"
        :label="actionLabel"
        :width="actionWidth"
        :align="actionAlign || 'center'"
        fixed="right"
      >
        <template #default="scope">
          <slot name="actions" :row="scope.row" :$index="scope.$index" />
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 分页 -->
    <div v-if="showPagination" class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="pageSizes"
        :total="total"
        :layout="paginationLayout"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  tableData: {
    type: Array,
    required: true
  },
  tableColumns: {
    type: Array,
    required: true
  },
  showSelection: {
    type: Boolean,
    default: false
  },
  showIndex: {
    type: Boolean,
    default: false
  },
  showActions: {
    type: Boolean,
    default: true
  },
  actionLabel: {
    type: String,
    default: '操作'
  },
  actionWidth: {
    type: [String, Number],
    default: 'auto'
  },
  actionAlign: {
    type: String,
    default: 'center'
  },
  // 分页相关属性
  showPagination: {
    type: Boolean,
    default: true
  },
  pagination: {
    type: Object,
    default: () => ({
      currentPage: 1,
      pageSize: 10,
      total: 0,
      pageSizes: [10, 20, 50, 100]
    })
  },
  paginationLayout: {
    type: String,
    default: 'total, sizes, prev, pager, next, jumper'
  }
})

const emit = defineEmits([
  'selection-change',
  'size-change',
  'current-change',
  'update:pagination'
])

// 分页相关数据
const currentPage = computed({
  get: () => props.pagination.currentPage,
  set: (val) => {
    emit('update:pagination', { ...props.pagination, currentPage: val })
  }
})

const pageSize = computed({
  get: () => props.pagination.pageSize,
  set: (val) => {
    emit('update:pagination', { ...props.pagination, pageSize: val })
  }
})

const total = computed(() => props.pagination.total)
const pageSizes = computed(() => props.pagination.pageSizes)

// 事件处理
const handleSelectionChange = (selection) => {
  emit('selection-change', selection)
}

const handleSizeChange = (val) => {
  emit('size-change', val)
}

const handleCurrentChange = (val) => {
  emit('current-change', val)
}
</script>

<style scoped>
.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>